<template>
  <div class="classification-addPop" @click="handleToClosePop">
      <div class="classification-addPop-content" @click.stop="">
          <div class="classification-addPop-content-header">
              <h2>{{title}}</h2>
              <p><i class="el-icon-close" @click="handleToClosePop"></i></p>
          </div>
          <div class="classification-addPop-content-from">

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="ruleForm.name" maxlength="50" show-word-limit></el-input>
                </el-form-item>

                <el-form-item label="图标" prop="icon" hide-required-asterisk>
                    <div id="upload-demo-box">
                        <el-upload
                            class="upload-demo"
                            drag
                            action="/backend/api/imageUpload?"
                            :headers="headers"
                            multiple
                            :on-success="handleAvatarSuccess"
                            >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">推荐尺寸比例（宽 * 高）：24 * 24</div>
                        </el-upload>
                        <div class="nowFileIcon">
                            <img v-if="ruleForm.icon" :src="ruleForm.icon" alt="图片加载失败">
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label="排序" prop="sort">
                    <el-input type="number" v-model="ruleForm.sort"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-switch v-model="lable"></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                </el-form-item>
            </el-form>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'addPop',
    props: {
        title : {
            type: String,
            default: '添加分类'
        },
        fromData : {
            type: Object,
            default: {}
        }
    },
    data() {
      return {
        interfaceUrl: '/backend/api/cate',
        lable: false,
        ruleForm: {
          name: '',
          status: 2,
          sort: 0,
          icon: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
          ],
          icon: [
            { required: true, message: '请上传图标', trigger: 'blur' },
          ]
        },
        nowPhoto: '',
        headers: {
            Authorization: 'Bearer ' + window.localStorage.getItem('token')
        }
      };
    },
    methods: {
        // 上传文件
        submitForm(formName) {
            let data = {};
            let interfaceUrl = this.interfaceUrl;
            //判断传参
            if(this.fromData.name){
                interfaceUrl = interfaceUrl + `/${this.fromData.id}`
                for(let i in this.ruleForm){
                    this.fromData[i] = this.ruleForm[i];
                }
                Object.assign(data, this.ruleForm);
                var method = 'put';
                console.log(data)
            }else{
                Object.assign(data, this.ruleForm)
                var method = 'post'
            }

            //上传
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http({
                        method: method,
                        url: interfaceUrl,
                        data: data
                    }).then(res => {
                        this.$emit('addPopToFile')
                        this.handleToClosePop()
                    }).catch(err=>{
                        this.$message.error('上传失败，请重试');
                    })
                } else {
                    return false;
                }
            });
        },

        // 取消
        resetForm(formName) {
            this.handleToClosePop();
        },

        // 上传头像
        handleAvatarSuccess(response, file, fileList){
            this.ruleForm.icon = file.response.url
        },

        //退出
        handleToClosePop(){
            this.$emit("closePop")
        }
    },
    mounted(){
        // 编辑店铺，判断状态
        if(this.fromData.name){
            for(let i in this.ruleForm){
                this.ruleForm[i] = this.fromData[i]
            }
            if(this.ruleForm.status == 2){
                this.lable = false
            }else{
                this.lable = true
            }
        }
    },
    watch: {
        lable(){
            if(this.lable){
                this.ruleForm.status = 1;
            }else{
                this.ruleForm.status = 2;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.classification-addPop{
    width: 100%;
    height: 100%;
    background: rgba(24, 24, 24, 0.5);;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    .classification-addPop-content{
        width: 50%;
        background: white;
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translateY(-50%);
    }

    .classification-addPop-content-header{
        display: flex;
        justify-content: space-between;
        height: 60px;
        padding: 0 20px;
        margin-bottom: 20px;
        h2{
            font-size: 18px;
            line-height: 60px;
        }
        p{
            font-size: 13px;
            line-height: 60px;
            color: #9095a6;
        }
    }

    .classification-addPop-content-from{
        display: flex;
        justify-content: center;
        .demo-ruleForm{
            flex: 0.8;
            margin-left: -50px;
        }
    }

    #upload-demo-box{
        display: flex;
        height: 230px;
        overflow: hidden;
    }
    .nowFileIcon{
        width: 178px;
        height: 178px;
        border: 1px dashed #d9d9d9;
        border-radius: 8px;
        margin-left: 25px;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
}

</style>